<template>
  <div>
    <el-popover placement="bottom-end" trigger="click" width="500">
      <el-table :data="cartData">
        <el-table-column prop="order_id" width="100" label="订单号"></el-table-column>
        <el-table-column prop="phone_type" width="150" label="商品"></el-table-column>
        <el-table-column prop="order_state" width="100" label="订单状态"></el-table-column>
        <el-table-column width="150" label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="getPayItem(scope.row.order_id)">付款</el-button>
            <el-button size="mini" @click="getDeleteItem(scope.row.order_id)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button size="mini" icon="el-icon-goods" slot="reference" @click="checkCart">购物车</el-button>
    </el-popover>
<!--    dialog区域-->
    <el-dialog title="提示" :visible.sync="dialogDeleteVisible" width="30%">
      <span>确认删除商品？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click.stop="dialogDeleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteProduct()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="请输入账户密码" :visible.sync="dialogConfirmVisible" width="30%">
      <el-input v-model="inputPassword" show-password></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click.stop="dialogConfirmVisible = false, inputPassword = ''">取 消</el-button>
        <el-button type="primary" @click.stop="comfirmProduct()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Cart",
  data() {
    return {

      inputPassword: '',
      realPassword: this.$store.state.password,

      dialogDeleteVisible: false,
      dialogConfirmVisible: false,

      cartData: [],
      deleteIndex: '',
      payIndex: ''
    }
  },
  methods: {
    deleteProduct() {
      var oid = this.deleteIndex;
      var cid = this.$store.state.id;
      axios.post("api/order/delete",{oid: oid,cid: cid}).then((res)=>{
        console.log(res);
        if (res.status===200) {
          this.dialogDeleteVisible = false;
          this.$notify({
            title: '商品删除成功',
            type: 'success'
          });
        }
      })
    },
    comfirmProduct() {
      var oid = this.payIndex;
      var cid = this.$store.state.id;
      if (this.inputPassword === this.$store.state.password) {
        this.dialogConfirmVisible = false;
        axios.post("api/order/pay",{oid: oid,cid: cid}).then((res)=>{
          if (res.status===200) {
            this.$notify({
              title: '订单提交成功',
              type: 'success',
            });
          }
        })
        this.inputPassword = '';
      } else {
        this.$message.error('密码错误');
      }
    },
    checkCart() {
      var id = this.$store.state.id;
      axios.post("api/order/cart",{id: id}).then((res)=>{
        console.log(res.data);
        this.cartData = res.data;
      })
    },
    getDeleteItem(value) {
      this.dialogDeleteVisible = true;
      this.deleteIndex = value;
    },
    getPayItem(value) {
      this.dialogConfirmVisible = true;
      this.payIndex = value;
    }
  }
}
</script>

<style scoped>

</style>
